<template>
	<tm-fullView>
		<tm-menubars title="步进器" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2"
				:class="$tm.vx.state().tmVuetify.black?'black bk':''">示例</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">基本示例</text>
				<tm-stepper color="white text" v-model="word2"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">只能整数</text>
				<tm-stepper :fixed="0" color="white text" v-model="word1"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">固定小数点位</text>
				<tm-stepper :disabledInput="true" :fixed="2" color="white text" v-model="word3"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">步幅设置</text>
				<tm-stepper v-model="word" :step="10" color="bg-gradient-pink-accent"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">范围</text>
				<tm-stepper v-model="word4" :min="-10" :max="10" :step="1" color="bg-gradient-pink-accent"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">宽度设置</text>
				<tm-stepper width="300" v-model="word" :step="10" color="blue" :round="24"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">高度设置</text>
				<tm-stepper  v-model="word" :step="10" height="40"  color="bg-gradient-blue-accent" :round="24"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">定义圆按钮</text>
				<tm-stepper circular v-model="word4" :min="-10" :max="10" :step="1" :round="24" color="bg-gradient-pink-accent "></tm-stepper>
			</view>
			
			<view class="flex-between mb-24">
				<text class="text-size-n">定义组合主题</text>
				<tm-stepper circular v-model="word4" :min="-10" :max="10" :step="1" :round="24" :height="50" color="primary text"></tm-stepper>
			</view>
			<view class="flex-between mb-24">
				<text class="text-size-n">异步回调</text>
				<tm-stepper :callback="callback" v-model="word5" :step="1" color="bg-gradient-pink-accent"></tm-stepper>
			</view>
		</tm-sheet>


		<view style="height: 50upx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmStepper from "@/tm-vuetify/components/tm-stepper/tm-stepper.vue"
	export default {
		components: {
			tmFullView,
			tmMenubars,
			tmSheet,
			tmStepper
		},
		data() {
			return {
				word2: '1.2',
				word3: '1.01',
				word4: 0,
				word5: 0,
				word1: 0,
				word: 0
			}
		},
		methods: {
			callback(){
				return new Promise((res,rej)=>{
					setTimeout(function(){
						res(true);//填写true,表示增减成功。
						//res(fale);//增减失败，不会执行步进器的操作。
					},1000)
				})
			}
		}
	}
</script>

<style>

</style>
